Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import "compass/css3";

* { box-sizing: border-box; }

html {
 	height:100%; 
}

body {
 	background:#bcf6f7; 
  background:linear-gradient(#bcf6f7, #77f0f4);
  position:relative;
  height:100%;
  overflow:hidden;
  padding-top:70px;
}

.floor {
  width:100%;
  bottom:0;
  background:#764133;
  background:linear-gradient(#81493c, #63392d);
  height:200px;
  border-top:3px solid black;
  display:block; 
}

.wrapper {
 	width:270px;
  animation: move 10s linear infinite;
  position:relative;
  left:0;
  top:5px;
}

.top {
 	background:#86875f;
  border:3px solid black;
  border-bottom:none;
  width:140px;
  height:60px;
  border-radius:30px 100px 0 0;
  margin-left:45px;
  position:relative;
  box-shadow: inset 20px -8px 0 #5d6239; 
}

.middle {
 	width:200px;
  height:40px;
  background:#86875f;
  border:3px solid black;
  border-radius:10px 30px 0 0;
  box-shadow: inset 15px -8px 0 #5d6239; 
  border-bottom:none;
  margin-left:35px;
}

.explosion {
 	position:absolute;
  top:-40px;
  right:-70px;
  z-index:-2;
  border-radius:50%;
  width:80px;
  height:60px;
  background-color:#f7ff00;
  background-image: repeating-radial-gradient(75% 25%, circle cover, #f7ff00, #ffc526 33%,#991212);
  border:3px solid black;
  box-shadow:0 0 20px 5px rgba(0,0,0,0.5);
  animation:shoot 2s linear infinite;
  transform:rotate(-20deg) scale(0);
  opacity:0;
}

.top:after {
  content:"";
 	background:#86875f;
  border:3px solid black;
  height:20px;
  width:150px;
  position:absolute;
  transform:rotate(-15deg);
  right:-80px;
  top:10px;
  z-index:-1;
  box-shadow: inset 0 -8px 0 3px #5d6239; 
}

.top:before {
 	content:"";
  position:absolute;
  transform:rotate(-15deg);
  height:30px;
  width:15px;
  border:3px solid black;
  border-radius:8px;
  background:#86875f;
  right:-95px;
  top:-18px;
  box-shadow: inset 5px -6px 0 #5d6239; 
}

.bottom {
  background:#322d27;
  height:100px;
  width:270px;
  border-radius:100px 100px 150px 150px;
  border:3px solid black;
  padding:8px;
  box-shadow: inset 10px -10px 0 #161211;
}

.wheels:after {
 	content:"";
  clear:both;
  display:table;
}

.wheels {
  background:#47443d;
  border-radius:inherit;
  list-style:none;
  border:3px solid black;
  width:100%;
  height:100%;
  box-shadow:inset 0 8px 3px rgba(0,0,0,0.5);
}

.wheels li {
 	float:left;
  width:50px;
  height:50px;
  border:3px solid black;
  border-radius:50%;
  background:#959ca2;
  box-shadow: inset 10px -10px 0 #72757a;
  margin:4px;
  position:relative;
}

.wheels li:nth-child(2),
.wheels li:nth-child(3) {
 	margin-top:20px; 
}

.wheels li:after {
  background:#424439;
  border:3px solid black;
  width:14px;
  height:14px;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  content:"";
  margin-left:-10px;
  margin-top:-10px;
  box-shadow:inset 0 3px 1px rgba(0,0,0,0.5);
}

.star { 
  position: absolute; 
  left:50%;
  top:50%;
  margin-left:-30px;
  margin-top:-10px;
  display: block; 
  color: white; 
  width: 0px; 
  height: 0px; 
  border-right: 20px solid transparent; 
  border-bottom: 14px solid white; 
  border-left: 20px solid transparent; 
  transform: rotate(35deg);
}

.star:before { 
  border-bottom: 16px solid white; 
  border-left: 6px solid transparent; 
  border-right: 6px solid transparent; 
  position: absolute; 
  height: 0; 
  width: 0; 
  top: -10px; 
  left: -12px; 
  display: block; 
  content: ''; 
  transform: rotate(-35deg);
}

.star:after { 
  position: absolute; 
  display: block; 
  color: red; 
  top: 0px; 
  left: -21px; 
  width: 0px; 
  height: 0px; 
  border-right: 20px solid transparent; 
  border-bottom: 14px solid white; 
  border-left: 20px solid transparent; 
  transform: rotate(-70deg); 
  content: ''; 
}

@-moz-keyframes move {
	from { left: -300px; }
  to { left: 2000px; }
}

@-webkit-keyframes move {
	from { left: -300px; }
  to { left: 2000px; }
}

@-moz-keyframes shoot {
	0%, 11%, 100% { opacity:0; }
  20% { transform:rotate(-20deg) scale(1); opacity:1; }
 }
  
@-webkit-keyframes shoot {
	0%, 11%, 100% { opacity:0; transform:rotate(-20deg) scale(0);  }
  10% { transform:rotate(-20deg) scale(1); opacity:1; }
}

Frontend Forever App